<template>
  <div>
    <a-button type="primary" @click="handleClick">触发自定义函数</a-button>
    <a-textarea
      v-model:value="FormData.funStr"
      placeholder="Autosize height with minimum and maximum number of lines"
      :auto-size="{ minRows: 5 }"
    />
    <div>
      <h3>入参</h3>
      <p>feeTotal:{{ FormData.feeTotal }},name:{{ FormData.name }}</p>
      <p>funStr:{{ FormData.funStr }}</p>
      <p>res:{{ FormData.res }}</p>
    </div>
    <hr />
    <div>
      <h3>返回结果</h3>
      <p>state:{{ reInfo.state }}</p>
      <p>message:{{ reInfo.message }}</p>
    </div>
  </div>
</template>
<script lang="ts" setup>
// import type { ElButton } from 'element-plus'
import { ref, reactive, onMounted } from 'vue'

/**
 * 单据对象
 */
const FormData = reactive({
  feeTotal: 1000,
  name: '报销单',
  funStr:
    "if(FormData.feeTotal>500) { FormData.res='对象赋值';  return '销金额异常'} else {  return '金额有效，可正常提交';}",
  res: ''
})
/**
 * 执行前端js脚本
 * @param funBody 函数体
 */
function customeFun(funBody: string) {
  if (!!funBody) {
    /**
     * new Function() 构造函数可以接受多个字符串参数作为函数的参数和函数体
     * new Function ([arg1[, arg2[, ...argn]],] functionBody)
     */
    let customFunc = new Function('FormData', funBody)
    return customFunc(FormData)
  }
  return ''
}
// 返回结果
const reInfo = reactive({
  state: false,
  message: '',
  result: ''
})

function handleClick() {
  // 函数体
  // let funBOdy = 'return "Hello, " + FormData.name + "!";'
  let funBody = FormData.funStr
  let calcResult = customeFun(funBody)
  console.log(calcResult)
  reInfo.message = calcResult
}
</script>
<style lang="less" scoped></style>
